<template>
  <div class="wrap">
    <div id="echartContainer" style="height: 350px;"></div>
    <div id="echartContainer2" style="height: 350px;margin-top: 15px;"></div>
  </div>
</template>
<script>
  export default {
    name: 'PaymentAnalysis',
    data(){
      return{
      }
    },
    methods:{
      loadingSuccuss(){
        this.$emit('getLoadingFinished',false)
      },
      getPieChart(){
        let lData = [],sData = [];
        this.axios.get(this.api.getPayAnalysisList)
        .then((res) => {
          if(res.data.status === '1'){
            let _data = res.data.details;
            let name;
            for(let i = 0; i < _data.length; i ++){
              let item = new Object();
              if(_data[i].paytype===2){
                item.value = _data[i].totalmoney;
                item.name = '微信支付';
                name = '微信支付';
              }else if(_data[i].paytype===4){
                item.value = _data[i].totalmoney;
                item.name = '账户支付';
                name = '账户支付';
              }
              lData.push(name)
              sData.push(item)
            }
          }
          this.drawPieChart(lData,sData)
          this.loadingSuccuss();
        })
        .catch((err) => {
          this.loadingSuccuss();
        })
      },
      drawPieChart(_lData,_sData){
        document.getElementById('echartContainer').style.width = window.innerWidth + 'px';
        let myChart = this.$echarts.init(document.getElementById('echartContainer'))
        let option = {
          title : {
            text: '支付分析',
            x:'left'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}元 ({d}%)",
            position: ['25%', '50%']
          },
          legend: {
            orient: 'vertical',
            left: 'center',
            bottom: 'bottom',
            data: _lData
          },
          series : [
            {
              name: '支付方式',
              type: 'pie',
              radius : '50%',
              center: ['50%', '50%'],
              data:_sData,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 绘制图表
        myChart.setOption(option)
      },
      getLineChart(){
        let lData = [],
            sData = [];
        this.axios.get(this.api.getPayAnalysisByMonthList)
        .then((res) => {
          if(res.data.status === '1'){
            let _data = res.data.details;
            let name;
            for(let i = 0; i < _data.length; i ++){
              let item = new Object();
              lData.push(_data[i].name);
              item.name = _data[i].name;
              item.type = 'line';
              item.stack = '总量';
              item.data = _data[i].value;
              sData.push(item)
            }
          }
          this.drawLineChart(lData,sData)
          this.loadingSuccuss();
        })
        .catch((err) => {
          this.loadingSuccuss();
        })
      },
      drawLineChart(_lData,_sData){
        document.getElementById('echartContainer2').style.width = window.innerWidth + 'px';
        let myChart = this.$echarts.init(document.getElementById('echartContainer2'))
        let option = {
          title: {
            text: '最近一年支付走势',
            x: 'left'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:_lData,
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          },
          yAxis: {
            type: 'value',
            name: '单位：元'
          },
          series: _sData
        };
        // 绘制图表
        myChart.setOption(option)
      }
    },
    mounted(){
      this.getPieChart();
      this.getLineChart();
    }
  }
</script>
<style scoped>

</style>
